<template>
  <view class="max-box">
      <up-popup :show="show" :round="14" mode="bottom" @close="close" @open="open">
          <view class="popup_box ">
              <!-- 标题 -->
              <view class="popup_title">{{ popupTitle }}</view>
              <!-- 搜索框 -->
              <view class="search_box area"  v-if="searchBoxIsShow">
                  <s-search-keyword :placeholder="placeholder" @searchKeyWord="searchKeyWord"></s-search-keyword>
              </view>
              <!-- 列表盒子 -->
              <view class="list_box" v-if="arrayList.length != 0">
                      <view class="menu">
                        <view class="leftScroll"> 
                          <view  :class="isActive==index?'curr':'leftScroll_title'"  @click="chooseClick(index)"    v-for="(item,index) of arrayList" :key="index" >
                            <text>{{ item.name }}</text>
                          </view>
                      </view>
                      <view class="rightScroll" >
                        <scroll-view  scroll-y enhanced :show-scrollbar="false">
                          <view :class="selectProjectid == item.id?'active':'bigConScro'" v-for="(item,index) in arrayList[isActive]?.childrens" :key="index" @click="rightCheakActive(item)">
                            <view  class="listItems" >
                                {{ item.name }}
                            </view>
                            <image v-show="selectProjectid == item.id"
                                    :src="`${baseUrl}/uploads/uniapp_image/staff/kehuguanli_icon_check02.png`"
                                    mode="scaleToFill" />
                                <image v-show="selectProjectid != item.id"
                                    :src="`${baseUrl}/uploads/uniapp_image/staff/kehuguanli_icon_check01.png`"
                                    mode="scaleToFill" />
                          </view>
                        </scroll-view>
                      </view>
                  
                    </view>
              </view>
              <!-- 缺醒图 -->
              <view class="unawakening_box" v-else>
                  <up-empty :text="' '" :marginTop="61" :width="141" :height="141"
                      :icon="`${baseUrl}/uploads/uniapp_image/staff/kehuguanli_img_nodate@2.png`">
                      <view class="accretion_box">
                          <text>暂无数据</text>
                          <text v-if="showGoLink">？</text>
                          <text v-if="showGoLink" class="accretion" @tap="SwitchAddPage">去添加</text>
                      </view>
                  </up-empty>
              </view>
          </view>

          <!-- 按钮集合盒子 -->
          <view>
              <view class="button_box">
                  <view class="button_item_box">
                      <view class="turn_over" @tap="close()">取消</view>
                  </view>
                  <view class="button_item_box">
                      <view class="new_client" @tap="selectBtn">选择部门</view>
                  </view>
              </view>
              <view class="placeholder"></view>
          </view>
      </up-popup>
  </view>

</template>

<script setup>
  import sheep from '@/sheep';
  import { ref, watchEffect ,onMounted,watch} from 'vue';
  import { baseUrl } from "@/sheep/config";
const props = defineProps({
  // // 名称
  popupTitle: {
      type: String,
      default: '选择部门'
  },

  // 是否有新增
  showGoLink: {
      type: String,
      default: ''
  },
  // 传过来的数组列表
  arrayList: {
      type: Array,
      default: []
  },

  // 是否显示搜索框
  searchBoxIsShow: {
      type: Boolean,
      default: true
  },

  // 搜索栏默认文字
  placeholder: {
      type: String,
      default: '搜索项目'
  },
  // 没有数据点击跳转到添加页面
  skipPage: {
      type: String,
      default: ''
  },


})
onMounted(() => { 
watchEffect(async () => {
  selectData.value = await props.arrayList[0]?.childrens[0]
  selectProjectid.value = await props.arrayList[0]?.childrens[0].id
  })

}); 

const isActive = ref('0')
const chooseClick = (index) =>{
      isActive.value = index;
    }
//默认右侧id
const selectProjectid = ref()
  // 传给父组件的title 和 id
  const selectData = ref()
const rightCheakActive = (item)=>{
    selectProjectid.value = item.id
    selectData.value = item
    
}


  // 控制弹出层开关
  const show = ref(false)
  // 打开弹出层
  const open = () => {
      show.value = true
  }

  // 关闭弹出层
  const close = () => {
      show.value = false
  }

  // 搜索
  const searchKeyWord = (srarch_value) => {
      emits('subcomponentSearch',srarch_value)
  }
  const emits = defineEmits(['selectedData','subcomponentSearch']);
  // 选择项目
  const selectBtn = () => {
    props.arrayList.forEach((item,i)=>{
        if(item.id == selectData.value.parent_id ){
            selectData.value.jointTitles = item.name+'/'+selectData.value.name
        }
    })
      emits('selectedData',selectData.value)
      close()
      // selectData.value = []
  }

  // 跳转添加数据页
  const SwitchAddPage = () => {
  sheep.$router.go(props.skipPage);
  }

  // 暴露子组件属性或方法
  defineExpose({
      open,
      close,
  })

</script>

<style lang="scss" scoped>

  .area {
      margin: 0 40rpx;
  }

  // 内容盒子
  .popup_box {
      height: 60vh;
      // 标题
      .popup_title {
          margin: 30rpx 0;
          height: 56rpx;
          width: 100%;
          text-align: center;
          font-family: PingFangSC;
          color: $uni-text-color;
          font-weight: $uni-font-weight;
          font-size: 40rpx;
          font-style: normal;
          text-decoration: none;
      }
      // 搜索盒子
      .search_box {
          margin-bottom: 40rpx;
      }
 
      // 列表盒子
      .list_box {
          width: 100%;
          height: 88%;
          background-color: #ffffff;
      
      }
  }


  // 按钮集合大盒子
  .button_box {
      background-color: #ffffff;
      display: flex;
      height: 128rpx;
      width: 100%;
      justify-content: center;
      .button_item_box {
        //   width: calc(50% - 60rpx);
          padding: 18rpx 30rpx 20rpx 30rpx;
              // 取消按钮
          .turn_over {
              width: 240rpx;
              height: 90rpx;
              border-radius: 45rpx;
              border: 2rpx solid $uni-color-primary;
              font-family: PingFangSC;
              color: $uni-color-primary;
            //   font-weight: $uni-font-weight;
              font-size: 34rpx;
              font-style: normal;
              text-decoration: none;
              text-align: center;
              line-height: 90rpx;
          }
          // 选择项目按钮
          .new_client {
              width: 240rpx;
              height: 92rpx;
              border-radius: 45rpx;
              background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%);
              font-family: PingFangSC;
              color: #FFFFFF;
            //   font-weight: $uni-font-weight;
              font-size: 34rpx;
              font-style: normal;
              text-decoration: none;
              text-align: center;
              line-height: 92rpx;
          }
      }
  }

  // 占位盒子
  .placeholder {
      height: 32rpx;
      width: 100%;
      background-color: #ffffff;
  }

  // 缺醒图盒子
  .unawakening_box {
      border-top: 2rpx solid #efefef;
      // 插槽盒子
      .accretion_box {
          width: 100%;
          height: 35rpx;
          font-family: PingFangSC;
          font-weight: $uni-font-weight;
          font-size: $uni-font-size-sm;
          font-style: normal;
          text-decoration: none;
          text-align: center;
          line-height: 35rpx;
          color: #c0c4cc;
          .accretion {
              color: $uni-color-primary;
          }
      }
  }


  scroll-view {
      height: 50vh;
  }

 .menu{
  display: flex;
    justify-content: flex-start;
   height: 100%;
   position: relative;
 }
 .leftScroll{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 11;
  width: 212rpx;
  height: inherit;
  background-color: #F4F4F4;
  .leftScroll_title{
    height: 140rpx;
    color: #666666;
    font-weight: 500;
    font-size: $uni-font-size-base;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .curr{
    height: 140rpx;
    color: $uni-color-primary;
    font-weight: $uni-font-weight;
    font-size: $uni-font-size-base;
    display: flex;
    justify-content: left;
    align-items: center;
    position: relative;
    padding-left: 30rpx;
    background: $uni-bg-color;
    &::before{
      position: absolute;
      left: 0;
      top: 12%;
      z-index: 1;
      content: '';
      width: 10rpx;
      height: 100rpx;
      background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%);
    }
  }
 }
 .rightScroll {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 11;
    background: $uni-bg-color;
    width: calc(100% - 212rpx); 
    .bigConScro{
      height: 140rpx;
      display: flex;
    justify-content: space-between;
    align-items: center;
    width: 78%;
    margin: 0 auto;
    border-bottom: 1px solid #EEEEEE;
    &:last-child{
      border: none;
    }
    }
    image{
        width: 30rpx;
        height: 30rpx;
      }
    .listItems {
      color: $uni-text-color;
      font-weight: 500;
      font-size: $uni-font-size-base;
     
    }
    .active{
      height: 140rpx;
      display: flex;
      justify-content: space-between;
    align-items: center;
    width: 78%;
    margin: 0 auto; 
    border-bottom: 1px solid #EEEEEE;
    .listItems {
        color: $uni-color-primary;
        font-weight: $uni-font-weight;
    }
    &:last-child{
      border: none;
    }
    }
   }
   .search{
    background-color: #F9FBFF !important;
   }
</style>